"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { useWebSocket } from "@/lib/usewebsocket"
import { CameraFeed } from "@/components/camera-feed_websocket"
import { Camera, Pause, Play, Users, BookOpen } from "lucide-react"

const classrooms = [
  { id: "room-101", name: "A101", status: "online", cameras: 2 },
  { id: "room-102", name: "A102", status: "online", cameras: 2 },
  { id: "room-103", name: "C103", status: "online", cameras: 2 },
  { id: "room-104", name: "C104", status: "offline", cameras: 2 },
  { id: "room-105", name: "D105", status: "online", cameras: 2 },
]

export function VideoMonitoring() {
  const [selectedRoom, setSelectedRoom] = useState(classrooms[0].id)
  const currentRoom = classrooms.find((room) => room.id === selectedRoom) || classrooms[0]
  const [wsUrl1, setWsUrl1] = useState("") 
  const [wsUrl2, setWsUrl2] = useState("") 
  const [mainCamera, setMainCamera] = useState<"student" | "content">("student")

  const switchCameras = () => {
    setMainCamera((prev) => (prev === "student" ? "content" : "student"))
  }

  useEffect(() => {
    if (typeof window !== "undefined") {
      const url1 = `ws://172.21.141.148:3001`
      const url2 = `ws://172.21.128.126:3002`
      setWsUrl1(url1)
      setWsUrl2(url2)
    }
  }, [])

  const { videoSrc: videoSrc1, networkError: networkError1 } = useWebSocket(wsUrl1)
  const { videoSrc: videoSrc2, networkError: networkError2 } = useWebSocket(wsUrl2)

  return (
    <Card className="overflow-hidden">
      <CardHeader className="pb-3">
        <div className="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
          <div>
            <CardTitle>实时视频监测</CardTitle>
            <CardDescription>查看教室实时视频流</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            <Select value={selectedRoom} onValueChange={setSelectedRoom}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="选择教室" />
              </SelectTrigger>
              <SelectContent>
                {classrooms.map((room) => (
                  <SelectItem key={room.id} value={room.id} disabled={room.status === "offline"}>
                    {room.name} {room.status === "offline" && "(离线)"}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Badge variant={currentRoom.status === "online" ? "default" : "outline"}>
              {currentRoom.status === "online" ? "在线" : "离线"}
            </Badge>
          </div>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        <div className="p-6 md:p-10">
          <Card className="mb-6">
            <CardHeader className="pb-2">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                <CardTitle>摄像头监控</CardTitle>
                <div className="flex items-center gap-2">
                  <div
                    className={`flex items-center gap-1 px-3 py-1 rounded-md ${
                      mainCamera === "student" ? "bg-primary text-primary-foreground" : "bg-muted"
                    }`}
                    onClick={() => setMainCamera("student")}
                  >
                    <Users className="h-4 w-4" />
                    <span className="text-sm">学生监控</span>
                  </div>
                  <div
                    className={`flex items-center gap-1 px-3 py-1 rounded-md ${
                      mainCamera === "content" ? "bg-primary text-primary-foreground" : "bg-muted"
                    }`}
                    onClick={() => setMainCamera("content")}
                  >
                    <BookOpen className="h-4 w-4" />
                    <span className="text-sm">黑板/PPT监控</span>
                  </div>
                </div>
              </div>
              <CardDescription className="pt-2">点击任意摄像头画面可切换主次显示</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="relative aspect-[16/9] w-full rounded-md overflow-hidden bg-muted">
                {/* 主摄像头 */}
                <div className="w-full h-full">
                  <CameraFeed
                    videoSrc={mainCamera === "student" ? videoSrc1 : videoSrc2}
                    networkError={mainCamera === "student" ? networkError1 : networkError2}
                    type={mainCamera}
                    isActive={true}
                    className="w-full h-full"
                    isPrimary={true}
                    pipMode={false}
                    onSwitchCamera={switchCameras}
                  />
                </div>

                {/* 画中画摄像头 */}
                <div
                  className="absolute bottom-4 right-4 w-1/5 aspect-[16/9] rounded-md overflow-hidden border-2 border-white shadow-lg cursor-pointer hover:border-primary transition-colors"
                >
                  <CameraFeed
                    videoSrc={mainCamera === "student" ? videoSrc2 : videoSrc1}
                    networkError={mainCamera === "student" ? networkError2 : networkError1}
                    type={mainCamera === "student" ? "content" : "student"}
                    isActive={true}
                    className="w-full h-full"
                    isPrimary={false}
                    pipMode={false}
                    onSwitchCamera={switchCameras}
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </CardContent>
    </Card>
  )
}